<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01_作用域</title>
</head>
<body>
<!-- 
1、理解
    * 就是一块“地盘”，一个代码段所在的区域
    * 它是静态的（相对于上下文对象），在编写代码时就确定了
2、分类
    * 全局作用域
    * 函数作用域
    * ES6中的块级作用域
3、作用域
    * 隔离变量，不同作用域下同名变量不会有冲突
-->
<script>
var a = 10, b = 20
function fn(x) {
    var a = 100, c = 300
    console.log('fn()', a, b, c, x) 

    function bar(x) {
        var a = 1000, d = 400
        console.log('bar()', a, b, c, d, x)
    }

    bar(100) // 1000 20 300 400 100
    bar(200) // 1000 20 300 400 200
}
fn(10) // 100 20 300 10
</script>
</body>
</html>